<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Banner轮播图</title>
	<script src="../../js/layui/layui.js"></script>
	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />
<style type="text/css">
.layui-table-cell {
	text-align: center;
	height: auto;
	white-space: normal;
	width: auto;
}
#longImg{
	width:400px;
}
.layui-table img {
    max-width: none;
}
</style>
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<form class="layui-form" method="post" onsubmit="return false;">
			<div class="layui-inline">
				<button class="layui-btn" lay-submit onclick="addBanner()">添加轮播图</button>
			</div>
		</form>

	</blockquote>
	<table class="layui-table" lay-filter="test" id="demo" lay-filter="table"></table>
	<script type="text/javascript">
		var json;
		layui.use(['table','form','layer'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var layer = layui.layer;
		  var $ = layui.$;
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    //,height: 300
		    ,url: 'http://localhost:8080/FiveClothes/banner/findBanner' //数据接口
		    ,cols: [[ //表头
		      {field: 'id', title: 'ID', align:'center'}
		      ,{field: 'name', title: '图片名称', align:'center',width:500,templet:'<div><img src="../../../images/{{d.name}}" id="longImg" /></div>'}
		      ,{field: 'url', title: '图片链接地址', align:'center'}
		      ,{field: 'weight', title: '权重', align:'center'}
		      ,{field: 'right', align:'center',toolbar:'#barDemo'}
		    ]]
		  });
		table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			    var data = obj.data; //获得当前行数据
			    var layEvent = obj.event; //获得 lay-event 对应的值
			    sessionStorage.setItem(
						"product",
						JSON.stringify(data));
			    
			    if(layEvent === 'del'){ //删除
			     layer.confirm('真的删除行么', function(index){
			    	  $.post('http://localhost:8080/FiveClothes/banner/delBanner',{"id":data.id},
							  function(res){
			    		  			var msg;
						  			if(res){
						  				msg="删除成功"
						  			}else{
						  				msg="删除失败"
						  			}
						  			layer.msg(msg, {
							  			  icon: 1,
							  			  time: 2000 //2秒关闭（如果不配置，默认是3秒）
							  			}, function(){
											 window.location.reload();//刷新父页面
							  			}); 
						  			 
						  },'json');
			    	  layer.close(index);
			      });
			    } else if(layEvent === 'edit'){ //编辑
			    	json = JSON.stringify(data);
			    	//console.log(json);
			    	layer.open({
						 type: 2, 
						 content: 'BannerUpdate.html',
						 area: ['500px','400px']
					}); 
			    }
			  });
		  
		
		});
		
		//添加产品
		function addBanner(){
			layer.open({
			 type: 2, 
			 content: 'BannerAdd.html',
			 maxmin:true,
			 area: ['500px','400px'] 
			}); 
		} 
 	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
</body>
</html>